<template>
    <div id="background">
        <div class="logo">
            <img src="../assets/logo紫.png" alt="">
        </div>
        <div class="container">
            <div class="title">
                <span class="pic">
                    <img src="../assets/color-lock.png" alt="">
                </span>
                重置密码
            </div>
            <div class="item">
                <label class="left">
                    <img src="../assets/密码.svg" alt="">
                </label>
                <input type="text" name="user-id" v-model.trim="user_id" placeholder="请输入学号">
            </div>

            <div class="item">
                <label class="left">
                    <img src="../assets/密码.svg" alt="">
                </label>
                <input type="text" name="phone" v-model.trim="phone" placeholder="请输入手机号">
            </div>

            <div class="item">
                <label class="left">
                    <img src="../assets/phone.png" alt="">
                </label>
                <button class="code">
                    获取验证码
                </button>
                <input type="text" name="phone-code" v-model.trim="code" @click.prevent="getcode" placeholder="请输入验证码">
                <div class="hint">*验证码输入不正确</div>
            </div>

            <div class="item">
                <label class="left">
                    <img src="../assets/密码.svg" alt="">
                </label>
                <input type="password" name="newpassword" v-model.trim="newpassword" placeholder="请输入新的密码">
            </div>

            <div class="item">
                <label class="left">
                    <img src="../assets/密码.svg" alt="">
                </label>
                <input type="password" name="reppassword" v-model.trim="repeat_password" placeholder="请再次输入新的密码">
                <div class="hint">*两次密码输入不正确</div>
            </div>

            <button class="cancel">取消</button>
            <button type="submit" class="submit" @click.prevent="btn_login">确定</button>

        </div>

    </div>
</template>

<script>
export default {
    name: 'ChangePassword',
    data() {
        return {
            user_id: '',
            phone: '',
            code: '',
            newpassword: '',
            repeat_password: '',
        };
    },
    methods: {
        // 验证码修改密码的方法我写对了吗❓
        // btn_login() {
        //     if (this.code == ??? && this.newpassword == this.repeat_password) {
        //         this.$router.replace('/home');
        //     }
        // }

        // 获取验证码 
        // getcode() {
        //     return 
        // }
    },

}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

.logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
}

.logo img {
    width: 100%;
    height: 100%;
}

.container {
    position: absolute;
    background-color: transparent;
    width: 800px;
    height: 550px;
    top: 50%;
    left: 50%;
    font-size: 18px;
    color: 808080;
}

.container .title {
    font-size: 18px;
    color: #484848;
    font-weight: 400;
    margin: 20px auto;
}

.title .pic {
    display: inline-block;
    width: 35px;
    height: 35px;
}

.pic img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.item {
    position: relative;
    height: 60px;
    width: 423px;
    margin: 25px auto;
}



.item .left {
    position: absolute;
    width: 75px;
    height: 60px;
    background-color: rgb(255, 255, 255, .4);
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
}

.item .left img {
    position: absolute;
    top: 15px;
    right: 16px;
    width: 30px;
    height: 30px;
}

.item input {
    position: absolute;
    left: 75px;
    width: 350px;
    height: 60px;
    background-color: rgb(255, 255, 255, .4);
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    font-size: 16px;
    border: 0px;
    padding: 0px;
    margin: 0;
    box-shadow: none;
}

.item .code {
    position: absolute;
    bottom: 13px;
    right: 10px;
    font-size: 16px;
    color: #43c5fc;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.cancel,
.submit {
    position: relative;
    height: 90px;
    height: 45px;
    background-color: #60CFFF;
    border-radius: 60px;
    margin: 5px auto;
    box-shadow: none;
    border: none;

}

.cancel {
    margin-right: 40px;
}

.item .hint {
    position: absolute;
    font-size: 13px;
    color: #FF0000;
    top: 60px;
    left: 70px;
}
</style>